<template>
  <div class="pos">
    <el-row>
      <el-col :span="7">
        <el-tabs>
          <el-tab-pane label="点餐">
            <el-table :data="tableData" border style="width: 100%" stripe ref="multipleTable" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="goodsName" label="商品"></el-table-column>
              <el-table-column prop="count" label="量" width="50"></el-table-column>
              <el-table-column prop="price" label="金额" width="70"></el-table-column>
              <el-table-column label="操作" width="100" fixed="right">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="delOrderList(scope.row)">删除</el-button>
                    <el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
</template>
              </el-table-column>
            </el-table>
            <div class="totle" v-if="isShow ">数量：{{totalCount}}    金额：{{totalMoney}}元</div>
            <el-button type="warning" >挂单</el-button>
            <el-button type="danger" @click="checkAllDel()">删除</el-button>
            <el-button type="success" @click="checkout()">结账</el-button>
            <el-button type="info" @click="toggleSelection()">取消选择</el-button>
          </el-tab-pane>
          <el-tab-pane label="挂单">挂单</el-tab-pane>
          <el-tab-pane label="外卖">外卖</el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="17">
        <div class="often-goods">
          <div class="title">常用商品</div>
          <div class="often-goods-list">
            <ul>
                <li  v-for="goods in oftenGoods" :key="goods.goodsId" @click="addOrderList(goods)">
                    <span>{{goods.goodsName}}</span>
                    <span class="o-price">￥{{goods.price}}</span>
                </li>
            </ul>
            <div class="clear"></div>
          </div>
        </div>
        <div class="goods-type">
          <el-tabs>
              <el-tab-pane label="汉堡">
                  <ul class='cookList'>
                   <li v-for="goods in typeGoods0" @click="addOrderList(goods)">
                      <span class="foodImg"></span>
                      <div class="right">
                          <span class="foodName">{{goods.goodsName}}</span>
                          <span class="foodPrice">￥{{goods.price}}元</span>
                      </div>
                  </li>
                </ul>
              </el-tab-pane>
                  <el-tab-pane label="小食">
                    <ul class='cookList'>
                      <li v-for="goods in typeGoods1" @click="addOrderList(goods)">
                          <span class="foodImg"></span>
                          <div class="right">
                            <span class="foodName">{{goods.goodsName}}</span>
                            <span class="foodPrice">￥{{goods.price}}元</span>
                        </div>
                      </li>
                    </ul>
              </el-tab-pane>
              <el-tab-pane label="饮料">
                  <ul class='cookList'>
                    <li v-for="goods in typeGoods2" @click="addOrderList(goods)">
                        <span class="foodImg"></span>
                        <div class="right">
                          <span class="foodName">{{goods.goodsName}}</span>
                          <span class="foodPrice">￥{{goods.price}}元</span>
                        </div>
                    </li>
                  </ul>
              </el-tab-pane>
              <el-tab-pane label="套餐">
                  <ul class='cookList'>
                    <li v-for="goods in typeGoods3" @click="addOrderList(goods)">
                        <span class="foodImg"></span>
                        <div class="right">
                          <span class="foodName">{{goods.goodsName}}</span>
                          <span class="foodPrice">￥{{goods.price}}元</span>
                        </div>
                    </li>
                  </ul>
              </el-tab-pane>
          </el-tabs>
      </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "pos",
  data() {
    return {
      tableData: [],
      oftenGoods: [],
      typeGoods0: [],
      typeGoods1: [],
      typeGoods2: [],
      typeGoods3: [],
      totalMoney: 0,
      totalCount: 0,
      isHave: false,
      isShow: false,
      multipleSelection: []
    };
  },

  created() {
    //获取常用商品数据
    axios
      .get(
        "https://www.easy-mock.com/mock/5b8b30dbf032f03c5e71de7f/kuaican/oftenGoods"
      )
      .then(data => {
        this.oftenGoods = data.data;
      })
      .catch(error => {
        console.log(error);
        alert("网络错误，不能访问");
      });

    //获取商品分类数据
    axios
      .get(
        "https://www.easy-mock.com/mock/5b8b30dbf032f03c5e71de7f/kuaican/typeGoods"
      )
      .then(data => {
        var res = data.data;
        this.typeGoods0 = res[0];
        this.typeGoods1 = res[1];
        this.typeGoods2 = res[2];
        this.typeGoods3 = res[3];
      })
      .catch(error => {
        console.log(error);
        alert("网络错误，不能访问");
      });
  },
  methods: {
    addOrderList(goods) {
      this.isShow = true;
      //判断点击的商品是否存在
      let isHave = false;
      for (let i = 0; i < this.tableData.length; i++) {
        console.log(this.tableData[i].goodsId);
        if (this.tableData[i].goodsId == goods.goodsId) {
          isHave = true;
        }
      }

      //如果商品部存在在订单列表中
      if (isHave) {
        //存在就进行数量的添加
        /* let arr =this.tableData.filter(o=>{
            return o.goodsId==goods.goodsId
          })
          arr[0].count++; */
        // let arr =this.tableData.filter(o=>o.goodsId==goods.goodsId)
        // arr[0].count++;

        let arr = this.tableData.filter(function(o) {
          return o.goodsId == goods.goodsId;
        });
        arr[0].count++;

        /* 筛选出tableData数组中元素的goosId ==goods.goodsId，的全部元素然后再返回到一个新的tableData中，
          由于Javascript中，arr引用了tableData，但是指针是相同的，则改变arr，即tableData中的数据也改变了 */
      } else {
        //不存在就推入数组
        let newGoods = {
          goodsId: goods.goodsId,
          goodsName: goods.goodsName,
          price: goods.price,
          count: 1
        };
        this.tableData.push(newGoods);
      }

      //结算金额
      this.totalcount();
    },
    delOrderList(goods) {
      this.tableData = this.tableData.filter(o => o.goodsId != goods.goodsId);
      this.totalcount();
      if (this.tableData.length == 0) {
        this.isShow = false;
      }
    },
    totalcount: function() {
      this.totalCount = 0;
      this.totalMoney = 0;
      if (this.tableData) {
        this.tableData.forEach(element => {
          this.totalCount += element.count;
          this.totalMoney += element.price * element.count;
        });
      }
    },
    checkAllDel() {
      this.tableData = [];
      this.totalCount = 0;
      this.totalMoney = 0;
      if (this.tableData.length == 0) {
        this.isShow = false;
      }
    },
    checkout() {
      if (this.tableData.length != 0) {
        this.tableData = [];
        this.totalCount = 0;
        this.totalMoney = 0;
        this.isShow = false;
        this.$message({
          message: "结账成功",
          type: "success"
        });
      } else {
        this.$message.error("不能空结");
      }
    },
    // 选择的商品列表多选框，取消所选择的项
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
          this.totalCount = 0;
          this.totalMoney = 0;
        });
      } else {
        this.$refs.multipleTable.clearSelection();
        this.totalCount = 0;
        this.totalMoney = 0;
      }
    }, //多选项存储值（选择或改变选项是调用）
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.totalCount = 0;
      this.totalMoney = 0;
      if (this.tableData) {
        this.multipleSelection.forEach(element => {
          this.totalCount += element.count;
          this.totalMoney += element.price * element.count;
        });
      }
      console.log(this.multipleSelection);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.title {
  height: 19px;
  border-bottom: 1px solid #d3dce6;
  background-color: #f9fafc;
  padding: 10px;
}

.clear {
  clear: both;
}

.often-goods {
  height: 100%;
}

.often-goods-list ul li {
  list-style: none;
  float: left;
  border: 1px solid #e5e9f2;
  padding: 10px;
  margin: 5px;
  background-color: #fff;
}

.o-price {
  color: #58b7ff;
}

.goods-type {
  margin-top: 30px;
  border-top: 1px solid #d3dce6;
}

.cookList li {
  display: flex;
  float: left;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 8px;
  margin: 0 8px 8px;
  background-color: #fff;
  border: 1px solid #eaeaea;
  border-bottom: 1px solid #d0d0d0;
  border-radius: 5px;
  width: 20%;
}

.right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 80px;
  padding-left: 10px;
  box-sizing: border-box;
}

.foodImg {
  width: 40%;
  height: 80px;
  background: #58b7ff;
}

.foodName {
  font-size: 18px;
  color: brown;
}

.foodPrice {
  font-size: 16px;
}

.totle {
  text-align: center;
  font-size: 16px;
  border: 1px solid #d3dce6;
  background: #fff;
  height: 40px;
  line-height: 40px;
}
</style>
